<template>
  <div class="apply_list_container">
    <ZgtPullRefresh
      v-if="list.length"
      v-model="refreshing"
      @refresh="onRefresh"
    >
      <ZgtList
        :loading="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="getList"
      >
        <div class="list_item" v-for="(item, index) in list" :key="index">
          <div class="item_header">
            <div class="name">{{ item.name }}</div>
            <div class="status" :style="stateColor(item.state)">
              {{ item.stateName }}
            </div>
          </div>
          <van-divider></van-divider>
          <div class="item_main">
            <template v-if="item.state != 1 && item.state != -1">
              <div>
                <span class="label">
                  申请表编号
                </span>：
                <span class="value">{{ item.applyNo }}</span>
              </div>
              <div>
                <span class="label"
                  >购机者类型</span
                >：
                <span class="value">{{
                  item.personFlag == 0 ? "个人" : "组织"
                }}</span>
              </div>
            </template>
            <div>
              <span class="label">{{
                item.personFlag == 0 ? "申请人现住址" : "法定代表人现住址"
              }}</span>：
              <span class="value">{{ item.nowAddress }}</span>
            </div>
            <div>
              <span class="label"
                >申请所属乡镇</span
              >：
              <span class="value">{{ item.town }}</span>
            </div>
            <div>
              <span class="label"
                >申请所属村组</span
              >：
              <span class="value">{{ item.villageGroup || "无" }}</span>
            </div>

            <template v-if="item.state != 1 && item.state != -1">
              <div>
                <span class="label"
                  >生产企业名称</span
                >：
                <span class="value">{{ item.factoryName }}</span>
              </div>
              <div>
                <span class="label"
                  >经销商名称</span
                >：
                <span class="value">{{ item.dealerName }}</span>
              </div>
              <div>
                <span class="label"
                  >产品名称</span
                >：
                <span class="value">{{ item.proName }}</span>
              </div>
              <div>
                <span class="label"
                  >产品型号</span
                >：
                <span class="value">{{ item.model }}</span>
              </div>
              <div>
                <span class="label"
                  >购机数量</span
                >：
                <span class="value">{{ item.saleNumber }}</span>
              </div>
              <div>
                <span class="label"
                  >销售总价(元)</span
                >：
                <span class="value">{{ item.salePrice }}</span>
              </div>
              <div>
                <span class="label"
                  >单台中央补贴额(元)</span
                >：
                <span class="value">{{ item.centralSubsidy }}</span>
              </div>
            </template>
          </div>
          <template v-if="item.state != 1 && item.state != -1">
            <van-divider></van-divider>
            <div class="item_footer">
              <div>
                <span @click="progressLook(item)">
                  进度查看
                  <van-icon name="arrow" />
                </span>
              </div>
            </div>
          </template>
        </div>
      </ZgtList>
    </ZgtPullRefresh>
    <van-empty v-else description="暂无数据" />
  </div>
</template>

<script lang="js">
import { getBuyerApplyList } from '@/api'
import { EncryptSM4 } from '@/utils/allSM'
import { ZgtPullRefresh, ZgtList } from '@/components/zgt-comps'
export default {
  components: {
    ZgtPullRefresh,
    ZgtList
  },
  data() {
    return {
      list: [],
      // 加载
      loading: false,
      // 是否加载全部列表内容
      finished: false,
      // 刷新
      refreshing: false,

      // 页面加载状态
      toast: null,

      // 页面信息
      pageInfo: {
        pageIndex: 1,
        pageSize: 10
      }
    }
  },
  created() {
    this.toast = this.$zgtToast.loading({
      duration: 0, // 持续展示 toast
      forbidClick: true,
      message: '加载中',
    });
    this.getList()
  },
  methods: {
    stateColor(code) {
      switch (code) {
        case '30':
          return 'background-color: #FFF2E0; color: #FF9900;'
        case '40':
          return 'background-color: #E0F1FD; color: #2E78FF;'
        case '10':
          return 'background-color: #FFE9E6; color: #FF6154;'
        case '20':
          return 'background-color: #EBFAF2; color: #49C988;'
        case '21':
          return 'background-color: #FCDCBE; color: #FF8A00;'
        case '60':
          return 'background-color: #EBFFF8; color: #03C6CD;'
        case '70':
          return 'background-color: #ECE4FF; color: #6350C3;'
        case '80':
          return 'background-color: #FFF4FC; color: #EF5FCC;'
        case '99':
          return 'background-color: #E7F8FE; color: #0EBAFE;'
        default:
          return 'background-color: #E9E9E9; color: #989898;'
      }
    },
    // 获取列表
    getList() {
      let params = {
        ...this.pageInfo
      }
      console.log('参数', params);

      this.finished = true
      this.pageInfo.pageIndex++
      getBuyerApplyList({ jsons: EncryptSM4(JSON.stringify(params)) })
        .then(res => {
          console.log('获取列表', res);
          this.list.push(...res.data)
          if (res.data.length == params.pageSize) {
            this.finished = false
          }

          this.toast.clear()
          this.loading = false
          this.refreshing = false
        })
        .catch((err) => {
          console.log('获取列表err', err);
          this.toast.clear()
          this.loading = false
          this.refreshing = false
        })
    },
    // 下拉刷新
    onRefresh() {
      // 清空列表数据
      this.list = [];
      this.finished = false;
      this.pageInfo.pageIndex = 1;
      // 重新加载数据
      // 将 loading 设置为 true，表示处于加载状态
      this.loading = true;
      this.getList();
    },

    // 进度查看
    progressLook(item) {
      console.log('进度查看', item);
      this.$router.push({
        name: 'Progress',
        params: {
          id: item.id,
          uid: this.$store.state.uid,
          state: item.state,
          optTime: item.stateDate,
          stateName: item.stateName
        }
      })
    }
  },
}
</script>

<style lang="less" scoped>
.apply_list_container {
  height: 100%;
  background-color: #f4f7fc;
  flex: 1;

  .zgt-list {
    padding: 20px 15px 0;
  }

  .list_item {
    background-color: #fff;
    margin-bottom: 15px;
    border-radius: 6px;
    color: #2d3145;

    &:not(:has(+ .list_item)) {
      margin-bottom: 0;
    }

    .van-divider {
      margin-top: 0;
      margin-bottom: 0;
    }

    .item_header {
      display: flex;
      align-content: center;
      justify-content: space-between;
      padding: 10px 15px;

      .name {
        font-size: 15px;
        font-weight: bold;
      }

      .status {
        font-size: 12px;
        border-radius: 3px;
        padding: 0 5px;
        height: 20px;
        line-height: 21px;
      }
    }

    .item_main {
      padding: 10px 15px;

      & > div {
        display: flex;
        align-content: flex-start;
        line-height: 1.72;
        font-size: 14px;

        .label {
          width: 90px;
          text-align: right;
        }

        .value {
          color: #adadad;
          flex: 1;
          text-align: left;
          word-wrap: break-word;
        }
      }
    }

    .item_footer {
      text-align: right;
      color: #0f6ee7;
      font-size: 15px;
      padding: 10px 15px;
    }
  }
}
</style>
